<template>
  <node-view-wrapper as="span" class="umo-node-comment">
    <t-tooltip
      :content="tooltipContent"
      :max-width="300"
      placement="top"
      show-arrow
      :destroy-on-close="false"
    >
      <span
        class="umo-comment-icon"
        :class="{
          resolved: node.attrs.resolved,
          unresolved: !node.attrs.resolved,
        }"
        @click="handleCommentClick"
      >
        💬
      </span>
    </t-tooltip>

    <!-- 批注详情弹框 -->
    <t-dialog
      v-model:visible="showDialog"
      :header="t('comment.title')"
      :width="480"
      :destroy-on-close="true"
      placement="center"
    >
      <div class="umo-comment-dialog">
        <div class="umo-comment-info">
          <div class="umo-comment-author">
            <t-icon name="user" />
            <span>{{ node.attrs.author }}</span>
          </div>
          <div class="umo-comment-time">
            <t-icon name="time" />
            <span>{{ formatTime(node.attrs.createdAt) }}</span>
            <span v-if="node.attrs.updatedAt" class="updated-time">
              ({{ t('comment.updated') }}:
              {{ formatTime(node.attrs.updatedAt) }})
            </span>
          </div>
          <div class="umo-comment-status">
            <t-tag
              :theme="node.attrs.resolved ? 'success' : 'warning'"
              variant="light"
            >
              {{
                node.attrs.resolved
                  ? t('comment.resolved')
                  : t('comment.unresolved')
              }}
            </t-tag>
          </div>
        </div>

        <div class="umo-comment-content">
          <t-textarea
            v-model="editContent"
            :placeholder="t('comment.contentPlaceholder')"
            :autosize="{ minRows: 3, maxRows: 8 }"
            :readonly="!isEditing"
          />
        </div>

        <div class="umo-comment-actions">
          <div class="left-actions">
            <t-button
              v-if="!isEditing"
              variant="outline"
              size="small"
              @click="startEdit"
            >
              <t-icon name="edit" />
              {{ t('comment.edit') }}
            </t-button>
            <t-button
              v-if="isEditing"
              theme="primary"
              size="small"
              @click="saveEdit"
            >
              <t-icon name="check" />
              {{ t('comment.save') }}
            </t-button>
            <t-button
              v-if="isEditing"
              variant="outline"
              size="small"
              @click="cancelEdit"
            >
              <t-icon name="close" />
              {{ t('comment.cancel') }}
            </t-button>
          </div>

          <div class="right-actions">
            <t-button
              :theme="node.attrs.resolved ? 'warning' : 'success'"
              variant="outline"
              size="small"
              @click="toggleResolved"
            >
              <t-icon :name="node.attrs.resolved ? 'rollback' : 'check'" />
              {{
                node.attrs.resolved
                  ? t('comment.unresolve')
                  : t('comment.resolve')
              }}
            </t-button>
            <t-popconfirm
              :content="t('comment.deleteConfirm')"
              @confirm="deleteComment"
            >
              <t-button theme="danger" variant="outline" size="small">
                <t-icon name="delete" />
                {{ t('comment.delete') }}
              </t-button>
            </t-popconfirm>
          </div>
        </div>
      </div>
    </t-dialog>
  </node-view-wrapper>
</template>

<script setup lang="ts">
import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-3'
import { timeAgo } from '@/utils/time-ago'

const { node, editor } = defineProps(nodeViewProps)

let showDialog = $ref(false)
let isEditing = $ref(false)
let editContent = $ref(node.attrs.content || '')

const tooltipContent = $computed(() => {
  const lines = [
    `${t('comment.author')}: ${node.attrs.author}`,
    `${t('comment.content')}: ${node.attrs.content || t('comment.noContent')}`,
    `${t('comment.status')}: ${
      node.attrs.resolved ? t('comment.resolved') : t('comment.unresolved')
    }`,
  ]
  return lines.join('\n')
})

// 处理批注点击
const handleCommentClick = () => {
  showDialog = true
}

// 开始编辑
const startEdit = () => {
  isEditing = true
  editContent = node.attrs.content || ''
}

// 保存编辑
const saveEdit = () => {
  if (editContent.trim()) {
    editor.commands.updateComment(node.attrs.id, {
      content: editContent.trim(),
    })
    isEditing = false
    useMessage('success', {
      content: t('comment.updateSuccess'),
      placement: 'top',
    })
  }
}

// 取消编辑
const cancelEdit = () => {
  isEditing = false
  editContent = node.attrs.content || ''
}

// 切换解决状态
const toggleResolved = () => {
  const newStatus = !node.attrs.resolved
  editor.commands.updateComment(node.attrs.id, {
    resolved: newStatus,
  })
  useMessage('success', {
    content: newStatus
      ? t('comment.resolveSuccess')
      : t('comment.unresolveSuccess'),
    placement: 'top',
  })
}

// 删除批注
const deleteComment = () => {
  editor.commands.deleteComment(node.attrs.id)
  showDialog = false
  useMessage('success', {
    content: t('comment.deleteSuccess'),
    placement: 'top',
  })
}

// 格式化时间
const formatTime = (isoString: string) => {
  return timeAgo(isoString)
}
</script>

<style lang="less" scoped>
.umo-node-comment {
  display: inline-block;
  margin: 0 0.1em;
  vertical-align: middle;

  .umo-comment-icon {
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    user-select: none;

    &.unresolved {
      color: #ff9500;
      background-color: rgba(255, 149, 0, 0.1);
      border: 1px solid rgba(255, 149, 0, 0.3);
    }

    &.resolved {
      color: #52c41a;
      background-color: rgba(82, 196, 26, 0.1);
      border: 1px solid rgba(82, 196, 26, 0.3);
    }

    &:hover {
      transform: scale(1.1);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }
  }
}

.umo-comment-dialog {
  .umo-comment-info {
    margin-bottom: 16px;
    padding: 12px;
    background-color: var(--td-bg-color-secondarycontainer);
    border-radius: 6px;

    .umo-comment-author,
    .umo-comment-time {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 8px;
      color: var(--td-text-color-primary);
      font-size: 14px;

      .updated-time {
        color: var(--td-text-color-secondary);
        font-size: 12px;
      }
    }

    .umo-comment-status {
      margin-top: 8px;
    }
  }

  .umo-comment-content {
    margin-bottom: 16px;
  }

  .umo-comment-actions {
    display: flex;
    justify-content: space-between;
    gap: 8px;

    .left-actions,
    .right-actions {
      display: flex;
      gap: 8px;
    }
  }
}
</style> 